<template>
	<div class="range_box">
		<span class="bg"></span>
		<span class="line" :style="{ width: percentageData + 'px' }"></span>
		<span class="cube"></span>
	</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const props = defineProps({
	percentage: {
		type: Number,
		default: () => 0,
	},
});
let percentageData = ref(0);
onMounted(() => {
	setTimeout(() => {
		percentageData.value = props.percentage;
	});
});
</script>
<style scoped lang="scss">
.range_box {
	width: 100%;
	height: 22px;
	display: flex;
	align-items: center;
	position: relative;

	.line {
		transition: all 1s;
		height: 30%;
		background: linear-gradient(-90deg, #58b4db 0%, #9bc1ff 100%);
		border-radius: 20px 20px 20px 20px;
	}

	.cube {
		transform: translateX(-8px);
		width: 16px;
		height: 16px;
		background: #247fef;
		border-radius: 50%;
	}

	.bg {
		position: absolute;
		left: 0;
		top: 50%;
		height: 30%;
		width: 100%;
		transform: translateY(-50%);
		background: #359bc750;
		border-radius: 4px;
	}
}
</style>
